 window.onload=function(){
 	var len = '';
 	$.ajax({
		type:"post",
		url:B_SERV.URLPATH+'ftp/followThePainting_details',
		dataType:"json",
		data:{followThePaintingId:1},		        
		success:function(data){	
			console.log(data);
			if(data.code==200){
				var _msg = data.message.followThePaintingDetailsList;
				var desc = '',
					title = '',
					detail = '',
					imgid = '';
				var _html='';
				console.log(_msg.length);
				for(var i=0;i<_msg.length;i++){						
					var olist = document.getElementById("f-list");
					var oitem = document.createElement("li"); 
        			desc = _msg[i].pictureDescription;
        			title = _msg[i].pictureTitle;
        			detail = _msg[i].detailPicture;
        			imgid = _msg[i].id;
        			_html = '<img src="'+detail+'" alt="" id="h-'+imgid+'"/>';
        			oitem.className = "f-item";
        			oitem.innerHTML = _html;
                	olist.appendChild(oitem);
                	loadImg('h-'+imgid,detail);
                	$("h2").html(title);
                	$(".text").html(desc);
				}
				$(".f-small").html(_msg.length);
				len =_msg.length;				
			}
			setIscroll();
		},
		error:function(err){
			console.log(error);
		}
		
	})
 	var olist = document.getElementById("f-list");
 	var oview = document.getElementById("view");
 	var width = view.offsetWidth;
 	 //加过渡
    var addTransition = function(){
        olist.style.transition = "all 0.3s";
    };
    //清除过渡
    var removeTransition = function(){
        olist.style.transition = "none";
    }
 	//定位
 	var setTranslateX = function(translateX){
        olist.style.transform = "translateX("+translateX+"px)";
    }
 	//无缝轮播
 	function setIscroll(){		 
 		var index=1;
 		var startX=0;//开始的位置
 		var moveX=0;//滑动时候x的位置
 		var disX=0;//滑动距离
   		var isMove=false;//是否滑动过
   		var isc=new iScroll("view",{
	        snap:true,	       
        	bounce:false,
        	eventPassthrough: true,
	        preventDefault: false,
	          //是否开启惯性
	        momentum:false,
	        x:-460,
	        onScrollStart:function(e){
	        	startX=e.clientX;//起始位置
	        	console.log(startX);
	        },
	        onScrollMove:function(e){
	        	moveX=e.clientX;//滑动时的位置
	        	disX=moveX-startX;//移动的距离
	        	removeTransition(); 
	        	setTranslateX(-index * width +disX);//图片的实时定位
	        	isMove=true;//证明滑动过
	        },	        
	        onScrollEnd:function(e){
	        	olist.style.transition="ani 0.3s";
	            if(disX==0){
	            	return;
	            }
	            if(disX>0){	            	
	            	if(isMove && parseInt(disX)>width/3){	            	
	            		index--;	
	            	}
                }else{
            		if(isMove && parseInt(-disX)>width/3){
            			index++;	
            		}	            		
	            }
                addTransition();
	            setTranslateX(-index * width);//定位	            
	            if(index>len){
	            	index=len;
	            	alert("已到最后");
	            }else if(index<=1){
	            	index=1;
	            	alert("第一张");
	            }
	        }
	    })	    
 	} 	
 	//进度条
 	var list = document.getElementById("f-list");
 	var item = document.getElementsByClassName("item");
    var  op = document.getElementsByClassName("f-big")[0];
    var slide = document.getElementById("slide");
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");
  //移动加入事件   
  // 如何获取 比例 总长度
	oDiv2.onmousedown= function(ev){
        var e = ev || window.event;        
        divX = e.clientX - oDiv2.offsetLeft;//初始值
        //移动
        document.onmousemove = function(ev){ 
        	removeTransition(); 
        	var oleft = parseInt(oDiv2.style.left); //获取到移动条的left值
            var e = ev || window.event;
            //求出移动距离
            var L = e.clientX - divX;          
        	//求边界值
            if(L<0){
            	L = 0;  //最短距离
            	op.innerHTML = "1";
            }else if(L>=slide.offsetWidth-oDiv2.offsetWidth){
                L = slide.offsetWidth-oDiv2.offsetWidth; //最长距离
                console.log(L);
                op.innerHTML = len;
            }
            //总比例
            if(!oDiv2.style.left){
            	oleft=1;
            }
            if(oDiv2.style.left<=0){
            	oleft=1;
            }
            var Q = slide.offsetWidth-oDiv2.offsetWidth;
            var scale =  oleft / Q; //换算比例            
            var con = parseInt(scale* len);
            if(con<1){
            	con=1;
            }
        	op.innerHTML = con;            
            var w = -460*(con-1);
        	list.style.transform = "translate("+w+"px,0px) translateZ(0px)";
            //滚动条的长度
            oDiv1.style.width = L + "px"; 
            oDiv2.style.left = L + "px";  
            return false;
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
        return false;
    }
     //图片详情介绍 
     var intro = document.getElementById("intro");
     var xian = document.getElementsByClassName("introduce")[0];
     intro.onclick=function(){
        if(xian.style.display == 'block'){
        	xian.style.display = 'none';
        }else{
        	xian.style.display = 'block';
        }
     }
    
}
 